<template>
  <div class="home">
    <tools>
      <scroll-top class="item"></scroll-top>
    </tools>
    <header1 :text="searchword"></header1>
    <footer-link></footer-link>
    <div class="main hasHeader"
      id="homeMain">
      <section>
        <swiper1 class="banner"
        :slides="ad_banner">
        </swiper1>
        </section>
        <section>
        <navigation class="navigation"
          :ad_channel="ad_channel">
        </navigation>
        </section>
        <section>
          <spline1></spline1>
        </section>
        <section>
          <headlines :headlines="headlines"></headlines>
        </section>
        <section>
          <spline16></spline16>
        </section>
        <section>
          <image-map1 :imageMap="promotion"></image-map1>
        </section>
        <section>
          <spline16></spline16>
        </section>
        <section>
          <image-map2 :imageMap="index_cube1"></image-map2>
        </section>
        <section>
          <image-map2 :imageMap="index_cube2"></image-map2>
        </section>
        <section>
          <spline16></spline16>
        </section>
        <section>
          <image-map1 :imageMap="section_name"></image-map1>
        </section>
        <section>
          <image-map1 :imageMap="section_image1"></image-map1>
        </section>
        <section>
          <spline16></spline16>
        </section>
        <section>
          <image-map1 :imageMap="section_image2"></image-map1>
        </section>
        <section>
          <spline16></spline16>
        </section>
        <section>
          <image-map1 :imageMap="section_image3"></image-map1>
        </section>
        <section>
          <spline16></spline16>
        </section>
        <section>
          <image-map1 :imageMap="section_image4"></image-map1>
        </section>
        <section>
          <spline16></spline16>
        </section>
        <section id="lockBar" class="lockBar"
          style="position:relative">
            <tabbar :tabbar="tabbar"></tabbar>
            <div class="proList"
              style="padding-top:.57rem;">
              <product-list :productList='productList'></product-list>
            </div>
            <div class="nomore">没有更多了</div>
        </section>
    </div>
  </div>
</template>
<script>
import Header1 from '../common/Header1'
import FooterLink from '../common/FooterLink'
import Spline1 from '../common/Spline1'
import Spline16 from '../common/Spline16'
import ScrollTop from '../common/ScrollTop'
import Tools from '../common/Tools'
import Swiper1 from '../common/Swiper1'
import Navigation from './Navigation'
import Headlines from './Headlines'
import ImageMap1 from './ImageMap1'
import ImageMap2 from './ImageMap2'
import Tabbar from './Tabbar'
import productList from "../common/productList"
export default {
  components: {
    Header1, Swiper1, Navigation, 
    Spline1, Spline16, Headlines, 
    ImageMap1, ImageMap2, Tabbar, 
    Tools, ScrollTop, FooterLink,
    productList
  },
  data(){
    return {
      float_tail: [],
      searchword: [],
      ad_banner: [],
      ad_channel: [],
      headlines: [],
      imgMap: [],
      promotion: [],
      index_cube1: [],
      index_cube2: [],
      section_name: [],
      section_image1: [],
      section_image2: [],
      section_image3: [],
      section_image4: [],
      searchword: [],
      tabbar: [],
      data: {
      	categoryId: -1,
      	pageNo: 1,
      	pageSize: 10,
      },
      totalPage: 1,
      productList: []
    }
  },
  methods: {
  	getData() {
	  	let {categoryId,pageNo,pageSize} = this.data;
  		if(pageNo==1) {
  			this.productList = [];
  		}
	  	let data = 'category='+categoryId+'.pageNo='+pageNo+'.pageSize='+pageSize;
	  	fetch("static/data/home/getModuleData."+data+".json")
	    .then(res => {
	      return res.json();
	    }).then(res => {
	    	this.productList = this.productList.concat(res.data.listObj);
	    	this.totalPage = res.data.totalPage;
	    })
  	}
  },
  
  created() {
  	this.getData();
  	//分类商品数据    
    homeBus.$on('categoryId',id => {
    	if(this.data.categoryId != id){
    		this.data.pageNo = 1;
    		this.data.categoryId = id;
    		console.log(this.data)
    		this.getData();
    	}
    })
    
    fetch("static/data/home/list.ad_banner.json")
    .then(res => {
      return res.json();
    }).then(res => {
      let data = res.data;
      this.ad_banner = data.ad_banner;
      this.ad_channel = data.ad_channel;
      this.searchword = data.searchword[0].title;
    })
    fetch("static/data/home/headlinesList.json")
    .then(res => {
      return res.json();
    }).then(res => {
      this.headlines = res.data.pageResult.listObj;
    })
    fetch("static/data/home/cubeList.json")
    .then(res => {
      return res.json();
    }).then(res => {
      this.promotion = res.data.promotion;
      this.index_cube1 = res.data.index_cube1;
      this.index_cube2 = res.data.index_cube2;
      this.section_name = res.data.section_name;
      this.section_image1 = res.data.section_image1;
      this.section_image2 = res.data.section_image2;
      this.section_image3 = res.data.section_image3;
      this.section_image4 = res.data.section_image4;
    })
    fetch("static/data/home/getModuleDataCategory.json")
    .then(res => {
      return res.json();
    }).then(res => {
      this.tabbar = res.data;
    })
		
  },
  mounted() {
    window.addEventListener("scroll", ()=>{
        let top = document.body.scrollTop;
        let w = document.documentElement.clientWidth;
        let h = document.documentElement.clientHeight;
        let H = document.documentElement.offsetHeight;
        let tabbarEle = document.querySelector("#tabbar");
        let scrollTopEle = document.querySelector("#scroll-top");
        let homeMainEle = document.querySelector("#homeMain");
        let lockBarEle = document.querySelector("#lockBar");
        let headerEle = document.querySelector("#header");
        if (homeMainEle && lockBarEle && headerEle) {
          let h1 = homeMainEle.offsetHeight;
          let h2 = lockBarEle.offsetHeight;
          let h3 = headerEle.offsetHeight;
          //tabbar设为固定定位
          if (top+h3 >= h1-h2) {
            tabbarEle.style.position = "fixed";
            tabbarEle.style.top = h3+'px';
          }else{
              tabbarEle.style.position = "absolute";
              tabbarEle.style.top = 0;
          }
          //返回顶部按钮显示或隐藏
          if (top+h3 >= h1-h2-w*350/750) {
              scrollTopEle.style.opacity = 1;
          }else{
              scrollTopEle.style.opacity = 0;
          }
        }
       // 懒加载：滑到底部重新请求
        if(top+h >= H-50) {
        	if(this.data.pageNo == 3) {
        		return;
        	}
          
        	this.data.pageNo++;
        	this.getData();
          console.log(this.data)
        }
    }) ;
  }
}
</script>
<style>
.home{
  border-bottom: .49rem solid transparent;
}
.lockBar{
	background-color:#f5f5f5
}
.nomore{
	padding: .1rem 0;
	color: #999;
	font-size: .12rem;
	text-align: center;
}
</style>
